<template>
	<div>



		<div class="card-content">

			<customHeader evenTtype="crossborder" :parent_current_user_id="parent_current_user_id"
				:picOrVideo.sync="picOrVideo" />


			<div class="between header" v-if="false">
				<div class="icon back" @click="back">
					<image src="/static/card/back.png" style="width: 15rpx;" mode="widthFix"></image>
				</div>
				<!-- user_id=当前用户 -->
				<div class="icon edit flex"
					@click="go('/pages/tabbar/order/card/form/crossborder?parent_current_user_id='+parent_current_user_id)">
					<image src="/static/card/edit.png" mode="widthFix"
						style="width: 30rpx;margin-right: 8rpx;display: block"></image>
					编辑名片
				</div>
			</div>

			<div class="pic-video">
				<div class="video" v-show="picOrVideo==='video'">
					<video :src="ossPath+pageData.buy_videos" :controls="true" style="width: 100%;height: 100%"></video>
				</div>
				<swiper v-show="picOrVideo=='pic'" style="width: 100%;height: 100%;">
					<swiper-item>
						<view class="swiper-item" v-for="item in pageData.shop_image">
							<image :src="ossPath+item" mode="aspectFill" style="width: 100%;height: 882rpx;"></image>
						</view>
					</swiper-item>
				</swiper>
			</div>

			<div class="info">
				<div class="h2">
					<image src="/static/card/medal.png" style="width: 20rpx;height:20rpx;margin-right: 8rpx;"></image>
					跨境货代Top{{pageData.rank}}
				</div>
				<div class="h1 between">
					<div class="company-name">
						{{pageData.username}}
					</div>
					<image src="/static/card/adventage2.png" class="lock" style="width: 50rpx;" mode="widthFix"></image>
				</div>
				<div class="h3">注册时间: {{pageData.reg_time}}</div>
			</div>

			<div class="statistics">
				<div class="address flex">
					<image src="/static/card/address.png" mode="widthFix" style="width: 30rpx;"></image>
					{{pageData.reg_address}}
				</div>

				<div class="statistics-list ">
					<statisticsItem style="width: 50%;" label="综合评分" :value="pageData.rating" />
					<statisticsItem style="width: 50%;" label="接单量" :value="pageData.receiving_order_num" />
					<statisticsItem label="准时率" :value="pageData.on_time_rate" unit="%" />
					<statisticsItem label="好评率" :value="pageData.goods_comment_rate" unit="%" />
					<statisticsItem label="投诉率" :value="pageData.complaint_rate" unit="%" />
				</div>

				<div class="adventage">
					<div class="item" v-if="pageData.is_bond">
						<image src="/static/card/adventage.png" mode="widthFix" style="width: 22rpx;"></image>
						保证金1000W
					</div>
					<div class="item" v-if="pageData.is_insure">
						<image src="/static/card/adventage.png" mode="widthFix" style="width: 22rpx;"></image>
						已投保货运险
					</div>
					<div class="item" v-if="pageData.is_agency">
						<image src="/static/card/adventage.png" mode="widthFix" style="width: 22rpx;"></image>
						代收付款
					</div>
				</div>

			</div>

			<div class="section">
				<div class="section-title">公司简介</div>
				<div class="fz22 color-1d" :class="{part:!companyDescIsSlideDown}" style="line-height: 40rpx;">
					{{pageData.profile}}
					<div class="slide-down">
						<div class="btn" @click="companyDescIsSlideDown=true">展开</div>
					</div>
				</div>
			</div>

			<div class="section">
				<div class="section-title margin-0">基础服务</div>
				<div class="info-group between">
					<div class="label">业务方向</div>
					<div class="value">
						<div class="country">
							<div class="item flex">
								<image src="/static/card/zh.png"
									v-if="pageData.industry_direction_start_list&&pageData.industry_direction_start_list[0]&&pageData.industry_direction_start_list[0].country==0"
									mode="widthFix" style="width:40rpx" />
								<image src="/static/card/ru.png"
									v-if="pageData.industry_direction_start_list&&pageData.industry_direction_start_list[0]&&pageData.industry_direction_start_list[0].country==1"
									mode="widthFix" style="width:40rpx" />
								{{pageData.industry_direction_start_list&&pageData.industry_direction_start_list[0]&&pageData.industry_direction_start_list[0].shortname}}
							</div>
							<div class="flex" style="margin:0 20rpx;">
								<image src="/static/card/to.png" mode="widthFix" style="width:8rpx" />
								<image src="/static/card/to.png" mode="widthFix" style="width:8rpx" />
							</div>
							<div class="item flex">
								<image src="/static/card/zh.png"
									v-if="pageData.industry_direction_end_list&&pageData.industry_direction_end_list&&pageData.industry_direction_end_list[0].country==0"
									mode="widthFix" style="width:40rpx" />
								<image src="/static/card/ru.png"
									v-if="pageData.industry_direction_end_list&&pageData.industry_direction_end_list&&pageData.industry_direction_end_list[0].country==1"
									mode="widthFix" style="width:40rpx" />
								{{pageData.industry_direction_end_list&&pageData.industry_direction_end_list&&pageData.industry_direction_end_list[0].shortname}}
							</div>
						</div>
					</div>
				</div>
				<div class="info-group between">
					<div class="label">公司所在地</div>
					<div class="value">{{pageData.area_id&&pageData.area_id.mergename||''}}</div>
				</div>
				<div class="info-group between" style="align-items: flex-start;">
					<div class="label">通关口岸</div>
					<div class="value">
						<view v-for="item in pageData.kouan" style="text-align: right;margin-bottom: 8rpx;">
							{{item.mergename}}
						</view>
					</div>
				</div>
				<div class="info-group">
					<div class="label">运输方式</div>
					<div style="margin-top: 30rpx;">
						<transportationSelect :read="true" :itemValue.sync="pageData.provide_transport_id" />
					</div>
				</div>
				<div class="info-group">
					<div class="label">提供服务</div>
					<div style="margin-top: 30rpx;">
						<serviceSelect :read="true" :itemValue.sync="pageData.provide_services_id" />
					</div>
				</div>
				<div class="info-group border-0">
					<div class="label">运输业务</div>
					<customRadio :read="true" :itemValue.sync="pageData.transport_type" />
				</div>
			</div>

			<div class="section">
				<div class="section-title between">
					<view>仓储配套</view>
				</div>
				<warehouseSelect read="true" :itemValue="pageData.warehouse_ids" :u_id="current_user_id" />
			</div>


			<div class="section">
				<div class="section-title">资质证照</div>
				<div v-if="zizhi.length==0" style="color:#999;font-size: 26rpx;text-align: center;">{{$t("暂未上传")}}</div>
				<div class="pic-preview">
					<div class="item" v-for="item in zizhi">
						<div class="pic" @click="preview(item.pic)">
							<image v-if="item.pic" :src="ossPath+item.pic" mode="aspectFill"></image>
							<view v-else class="nomore2 center">{{$t("未上传")}}</view>
						</div>
						<div class="item-title">{{item.title}}</div>
					</div>
				</div>

			</div>

			<div class="section">
				<div class="section-title">现场实拍</div>
				<div class="tab">
					<div v-for="(item,index) in [$t('公司'),$t('车辆'),$t('运输'),$t('服务'),]"
						:class="{active:picIndex==index}" @click="picIndex=index" class="item">
						{{item}}
					</div>
				</div>

				<picPreview v-if="picIndex==0" :listDataStr="pageData.company_images" />
				<picPreview v-if="picIndex==1" :listDataStr="pageData.car_images" />
				<picPreview v-if="picIndex==2" :listDataStr="pageData.transport_images" />
				<picPreview v-if="picIndex==3" :listDataStr="pageData.service_images" />
			</div>

			<div style="height: 200rpx;"></div>
			<div class="form-btn-group">
				<div class="submit">
					<image src="/static/card/message.png" mode="widthFix"
						style="width: 30rpx;margin-right: 8rpx;margin-bottom: -3rpx;">
					</image>
					即时沟通
				</div>
			</div>


		</div>
	</div>
</template>

<script>
	import customHeader from "../components/common/header.vue"

	import transportationSelect from "../components/transportation-select.vue"
	import serviceSelect from "../components/service-select.vue"
	import customRadio from "../components/radio.vue"
	import route from "../components/route.vue"
	import warehouseSelect from "../components/warehouse-select.vue"
	import fileUploadVue from '../../components/fileUpload.vue'
	import fileUploadWithTitle from '../components/fileUploadWithTitle.vue'
	import statisticsItem from "../components/small/statisticsItem.vue"
	import picPreview from "../components/small/picPreview.vue"
	import {
		IMAGE_URL
	} from "@/config/app.js"
	export default {
		props: ["parent_current_user_id"],
		components: {
			customHeader,
			transportationSelect,
			serviceSelect,
			customRadio,
			route,
			fileUploadVue,
			fileUploadWithTitle,
			statisticsItem,
			picPreview,
			warehouseSelect
		},
		data() {
			return {
				current_user_id: uni.getStorageSync("user_id"),
				onlyRoute: false,
				zizhi: [],
				picIndex: 0,
				ossPath: IMAGE_URL,
				companyDescIsSlideDown: false,
				picOrVideo: "video",
				pageData: {

				}
			}
		},

		created() {
			//名片还可以查看其他人的
			if (this.parent_current_user_id) this.current_user_id = this.parent_current_user_id
			//是否直接展开

			this.getUserInfo();
		},
		methods: {
			back() {
				uni.navigateBack()
			},
			go(url) {
				console.log(url)
				uni.navigateTo({
					url
				})
			},
			routeCount() {
				if (this.pageData.car_quote) {
					let count = 0;
					let chcked_car_list = JSON.parse(this.pageData.car_quote)
					for (let key in chcked_car_list) {
						count += chcked_car_list[key].length
					}
					return count
				} else {
					return 0
				}
			},
			preview(path) {
				if (!path) return
				path = this.ossPath + path
				uni.previewImage({
					urls: [path],
					current: path
				})
			},
			//获取名片
			getUserInfo() {
				this.$u.api.user.getUserHomepage({
					user_id: this.current_user_id,
					type: 1,
					from: ''
				}).then(res => {
					this.pageData = res.userInfo

					if (this.pageData.profile.length < 100) {
						this.companyDescIsSlideDown = true
					}

					//资质证书
					if (this.pageData.license_images) {
						let [pics, titles] = this.pageData.license_images.split(";")
						pics = pics.split(",")
						titles = titles.split(",")
						if (pics.length > 0) {
							pics.forEach((pic, index) => {
								this.zizhi.push({
									pic,
									title: titles[index]
								})
							})
						}
					}

				})
			}
		}
	}
</script>


<style lang="less">
	@import url("@/pages/tabbar/order/card/components/role.less");
</style>